<template>
    <div id="map">
    </div>
</template>

<script>
    import {Map, View} from 'ol'
    import {OSM,XYZ,Vector} from 'ol/source';
    import {Tile,Heatmap} from 'ol/layer';
    import KML  from 'ol/format/KML';

    export default {
        name: "HeatMap",
        data(){
            return{

            }
        },
        mounted() {
            //创建一个Heatmap图层
            var vector = new Heatmap({
                //矢量数据源（读取本地的KML数据）
                source: new Vector({
                    url: 'http://localhost:8888/openlayer/kml/heatMap.kml',
                    format: new KML({
                        extractStyles: false
                    }),
                    wrapX:false
                }),
                //热点半径
                radius: 15,
                //模糊尺寸,以像素为单位
                blur: 15
            });

            //为矢量数据源添加addfeature事件监听
            vector.getSource().on('addfeature', function (event) {
                //要素的名称属性
                var name = event.feature.get('name');
                //得到要素的地震震级属性（magnitude）
                var magnitude = parseFloat(name.substr(2));
                console.log(name)
                console.log(magnitude)
                //设置要素的weight属性范围是0到1
                event.feature.set('weight', magnitude - 5);
            });
            //初始化地图
            this.map = new Map({
                target: 'map',//指定挂载dom，注意必须是id
                layers: [
                    new Tile({
                        source: new OSM()//加载OpenStreetMap
                    }),
                    vector
                ],
                //配置视图
                view: new View({
                    center: [0,0], //视图中心位置
                    projection: "EPSG:4326", //指定投影
                    zoom: 2   //缩放到的级别
                })
            });
        }
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
    }
    #left{
        width: 50%;
        height: 100%;
    }
    #right{
        width: 50%;
        height: 100%;
    }
</style>